<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <!--表单开始-->

    <a-form ref="formRef" :model="formState" layout="vertical" :rules="RULES">
      <a-row :gutter="[12,12]">

        <a-col :span="12">
          <a-form-item label="部门代码" field="code">
            <a-input v-model="formState.code" placeholder="请填写部门代码" :disabled="isUpdate"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="部门名称" field="name">
            <a-input v-model="formState.name" placeholder="请填写部门名称"/>
          </a-form-item>
        </a-col>


        <a-col :span="12">
          <a-form-item label="所属机构" field="organ.code" :rules="RULES.organ.code">
            <smart-tree-selector v-model="formState.organ.code" placeholder="请选择机所属机构" :url="SystemOptions.OrganTreeOptions"
                                 :disabled="isUpdate" @change="loadDeptList"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="上级部门" field="parentCode">
            <a-tree-select v-model="formState.parentCode" :field-names="treeCtr.fieldNames" :data="treeCtr.list" placeholder="请选择上级部门"/>
          </a-form-item>
        </a-col>

        <a-divider :orientation="'left'">扩展信息</a-divider>
        <a-col :span="12">
          <a-form-item label="部门负责人姓名" field="master">
            <a-input v-model="formState.master" placeholder="部门负责人姓名"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="值班电话" field="tel">
            <a-input v-model="formState.tel" placeholder="请填写值班电话"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="`显示排序值 [ ${formState.sort} ]` " field="sort" tooltip="升序排序 显示值越小 显示越靠前">
            <a-slider v-model="formState.sort"/>
          </a-form-item>
        </a-col>

      </a-row>

    </a-form>
    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>

import {reactive, watch} from "vue";
import {EditDrawer} from '@/libs/core'
import {SystemOptions} from '@/libs/options'
import {DEPT_EDIT} from "../resource/form";
import {SystemHttp} from '../resource/http'
import {RequestUtil, EmptyUtil, TreeUtil} from "@/utils";


const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const {BODY, RULES} = DEPT_EDIT

const treeCtr = reactive({
  fieldNames: {key: 'value', title: 'label', children: 'children'},
  list: [{label: '顶级部门', value: '0', children: []}]
})


const {addDept, updateDept} = SystemHttp
const config = {tplRecord: BODY, rawRecord: props.record, rowKey: 'id', emit}
const service = new EditDrawer(config).setAddRequest(addDept).setUpdateRequest(updateDept)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '新建部门' : '修改部门'

// 位置属性发生变化的时候重新执行一次表单验证
watch(() => formState.value.address, () => formRef.value.validate())
const loadDeptList = async (organCode) => {
  if (EmptyUtil.isEmptyString(organCode)) {
    treeCtr.list[0].children = []
    formState.value.parentCode = ''
    return
  }
  const url = SystemOptions.DeptTreeOptions(organCode)
  const {data} = await RequestUtil.getAjax(url)
  treeCtr.list[0].children = TreeUtil.listToTreeNode(data, '0')
  formState.value.parentCode = ''
}
const init = async () => {
  if (props.record?.organ !== undefined) {
    await loadDeptList(props.record.organ.code)
    formState.value.parentCode = props.record.parentCode
  }
}
init()
</script>
